<template>
  <div>
    <div class="top-header">
      <div class="left-menu">
        <el-scrollbar wrap-class="scrollbar-wrapper" style="overflow: scroll;height: 100%;overflow-x: hidden;overflow-y: hidden;!important">
          <el-menu default-active="2" class="el-menu-vertical-demo"
                   @open="handleOpen" @close="handleClose" background-color="#1c2b36"
                   text-color="#fff" active-text-color="#869fb1">
            <div v-for="(item,index) in menus" :key="index">
              <el-submenu :index="index+'a'"   v-if="item.children">
                <template slot="title">
                  <img :src="item.icon" alt="">
                  <span>{{item.name}}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="idx+i.name" v-for="(i,idx) in item.children" :key="idx" @click="toUrl(i.link)">{{i.name}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item :index="index+'c'" v-if="!item.children" @click="toUrl(item.link)">
                <img :src="item.icon" alt="">
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="right-content saleMarketRight">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        menus:[
          {
            name:"产品能力分析",
            showContent:true,
            icon:require('../../images/marketSale/product.png'),
            children:[
              {name:"产品大盘", link:'/full/marketSale/totalPanel'},
              {name:"产品分析详情", link:'/full/marketSale/detailPanel'},
              {name:"单品监控与分析", link:'/full/marketSale/singleProduct'},
            ]
          },
          {
            name:"营销能力分析",
            showContent:false,
            icon:require('../../images/marketSale/analysis.png'),
            children:[
              {name:"营销渠道大盘分析", link:'/full/marketSale/channelTotal'},
              {name:"营销渠道分析详情", link:'/full/marketSale/channelDetail'},
              {name:"营销渠道监控与跟踪", link:'/full/marketSale/monitoringTracking'},
            ]
          },
          {
            name:"产品渠道优化",
            showContent:false,
            link: '/full/marketSale/optimizationIndex',
            icon:require('../../images/marketSale/optimization.png'),
          },
          {
            name:"产品档案管理",
            showContent:false,
            link: '/full/marketSale/productFileMangement',
            icon:require('../../images/marketSale/file.png'),
          },
          {
            name:"渠道管理",
            showContent:false,
            link: '/full/marketSale/channelManagement',
            icon:require('../../images/marketSale/channel.png'),
          },
          {
            name:"店铺管理",
            showContent:false,
            link: '/full/marketSale/shopManagement',
            icon:require('../../images/marketSale/shop.png'),
          },
          {
            name:"营销计划",
            showContent:false,
             link: '/full/marketSale/marketPlan/yearPlan',
            icon:require('../../images/marketSale/market.png'),
          },
          {
            name:"新产品上市计划",
            showContent:true,
            icon:require('../../images/marketSale/plan.png'),
            children:[
              {name:"时间轴总视图", link:'/full/marketSale/productTotalView'},
              {name:"产品阵列", link:'/full/marketSale/productQuene'},
              {name:"整体节奏规划", link:'/full/marketSale/overAllRhythmPlan'},
              {name:'整体部署规划', link:'/full/marketSale/overAllDeploymentPlan'},
              {name:'活动数据上报',link:'/full/marketSale/dataUpdate'}
            ]
          }
        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      },
      ifActive(names){ // 当前路由
        return names == this.$route.path ? 'is-active' : ''
      },
      toUrl(url){
        this.$router.push({path: url});
      },
      menuToggle(index){
        this.menus[index].showContent = !this.menus[index].showContent
      }
    },
    mounted: function () {
      let url=(this.$route.path).split('/')[2]
      for(let i in this.menus){
        if(url && url.indexOf(this.menus[i].link) >= 0){
          this.menus[i].showContent = true
        }
      }
    }
  }
</script>

<style lang="less">
.el-menu-item {
  color: rgb(162, 162, 162) !important;
}
.el-menu-item > img{
  margin-right: 18px;
}
.el-menu-item.is-active {
  background: #131e26 !important;
  color: white !important;
}
.left-menu {
  background: #1c2b36;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
.el-submenu__title {
  color: rgb(162, 162, 162) !important;
}
.el-submenu__title > img{
  margin-right: 18px;
}
.el-submenu.is-active > .el-submenu__title{
  background-color: #131e26 !important;
}
.el-submenu.is-active .el-menu-item{
  background-color: #131e26 !important;
}
.el-menu-item-group .el-menu-item.is-active{
  background-color: #1c2b36 !important;
}
.el-submenu.is-active .el-submenu__title {
  color: #fff !important;
}
</style>
